<template>
  <div class="timeout">
    <div class="clock-type">
      <div v-for="(x, y) in list" :key="y" @click="selectType(y)" :class="listIdx == y ? 'active' : ''">
        {{ x }}
      </div>
    </div>
    <div class="clock-content">
      <div v-if="listIdx == 0">
        <div>
          <div><input type="color" v-model="color"></div>
          <div> {{ color }}</div>
        </div>
      </div>
      <div v-if="listIdx == 1">
        <div>
          <div>
            <el-color-picker v-model="color" />
          </div>
          <div> {{ color }}</div>
        </div>
      </div>
      <div v-if="listIdx == 2">
        <div>
          <div>
            <el-color-picker v-model="color" show-alpha :predefine="predefineColors" />
          </div>
          <div> {{ color }}</div>
        </div>
      </div>
      <div v-if="listIdx == 3">
        <myColor />
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import myColor from './myColor.vue';
const list = [
  'H5',
  '饿了么',
  '透明度',
  '自研',
]
const listIdx = ref(0)
const color = ref('')
function selectType(y) {
  listIdx.value = y
  color.value = '#000'
}
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
onMounted(() => {
  // document.title = '选取颜色'
});

</script>
<style scoped lang="scss">
.clock-type {
  display: flex;
  margin: 10px;

  >div {
    margin-right: 10px;
    background-color: rgb(147, 87, 7);
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
  }

  .active {
    background-color: aqua;
    color: #111;
  }
}

.clock1 {
  font-size: 80px;
  font-weight: 700;
  margin: 10px;
}

.clock2 {
  // width: 650px;
  height: 150px;
  display: flex;
  margin: 50px;

  .big-num {
    margin-right: 10px;
  }

  .maohao {
    margin: 100px 20px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    >div {
      width: 10px;
      height: 10px;
      background-color: #a3fe19;
    }
  }
}

.clock-content {
  >div {
    margin: 10px;
    display: flex;
  }
}
</style>
